{include file="common/header"}
<!-- 百度地图引入 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9whTPxXrl8zvW3gjiAaoPa59gFekKK9I"></script>
 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>  
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>  
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
 <link rel="stylesheet" href="$meet/static/maps/css/map.css">  
<div id="search">  
    <input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " />  
    <input type="text" id="end" placeholder="请选择终点"  value="{$place}" onclick="searchRoute()"/>  
    <div class="btn-group">  
        <button id="bus-search" class="button">公交</button>  
        <button id="driver-search" class="button">驾车</button>  
        <button id="walk-search" class="button">步行</button>  
    </div>  
</div>  
<span class="hot_img" id="hot" onclick="hot_img()"></span>
<span class="dingwei" onclick="location_1()"></span>
<div  id="container"></div>
<div id="r-result"></div>  
<script type="text/javascript">
        $("#bus-search").css("background-color", "#95B7EE");  
        window.start_point = "";  
        window.end_point = "";  
        var tag=true;  
        //初始化地图
        var map = new BMap.Map("container");//定义一个百度地图对象
        map.centerAndZoom(new BMap.Point(114.87, 40.82), 10);//百度定位 13指的是定位显示的级别
        //加载组件
        function control() {
            map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
            map.enableKeyboard();//启动键盘操作地图
            map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用 
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                // enableGeolocation: true
            });
            map.addControl(navigationControl);

        }

        control();
        var longitude, latitude;

        var geoc = new BMap.Geocoder();  
        var geolocation = new BMap.Geolocation();  
        geolocation.getCurrentPosition(function(r)
        {  
                if(this.getStatus() == BMAP_STATUS_SUCCESS){   
                    window.start_point = r.point.lng+","+r.point.lat;  
      
      
                    // map = new BMap.Map("container");   // 创建Map实例  
                    var ep = window.start_point.split(",");  
                    map.centerAndZoom(new BMap.Point(ep[0],ep[1]), 13);  
                    // map.enableScrollWheelZoom(true);       //启用滚轮放大缩小  
                    var local = new BMap.LocalSearch(map, {  
                        renderOptions:{map: map}  
                    });  
                    // local.search("图书馆");  
                     $.get('/meetTWO/public/index/map/point_post',{lat:r.point.lat,lng:r.point.lng},function(data){
                        console.log(data)
                    })
                    setLocation(r.point);  
      
                    // addMapControl();  
                }else {  
                    $("#start").attr("placeholder","请输入您的当前位置")  
                    alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus());  
                }  
            },{enableHighAccuracy: true});  

         function setLocation(point){  
                geoc.getLocation(point, function(rs){  
                    var addComp = rs.addressComponents;  
                    var result = addComp.province + addComp.city + addComp.district;  
                    $("#start").val(result);  
      
                    //设置定位图标  
                    var new_point = new BMap.Point(rs.point.lng,rs.point.lat);  
                   var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
                            offset: new BMap.Size(10, 25), // 指定定位位置  
                            imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
                        });  
                    var marker = new BMap.Marker(new_point,{icon:myIcon,isOpen:true});  
                    map.addOverlay(marker);  
                    var opts = {  
                        width : 40,     // 信息窗口宽度  
                        height: 18,     // 信息窗口高度  
                        title : "我的位置" , // 信息窗口标题  
                        isOpen: 1,  
                    }  
                    var infoWindow = new BMap.InfoWindow("地址 : "+$("#start").val(), opts);  // 创建信息窗口对象  
                    marker.addEventListener("click", function(){  
                        map.openInfoWindow(infoWindow,new_point); //开启信息窗口  
                    });  
                    //设置监听，点选地图设终点，规划路线  
                    map.addEventListener("click",  
                        function(e) {  
                            window.end_point = e.point.lng +","+ e.point.lat;  
                            var local = new BMap.LocalSearch(map, {  
                                renderOptions:{map: map}  
                            });  
                            searchRoute();  
                        });  
                });  
            }  






        // sdk辅助定位
        // laction();
        // function laction()
        // {
        //     var geolocation = new BMap.Geolocation();
        //     // 开启SDK辅助定位
        //     geolocation.enableSDKLocation();
        //     geolocation.getCurrentPosition(function(r)
        //     {
        //         if(this.getStatus() == BMAP_STATUS_SUCCESS)
        //         {
        //             var mk = new BMap.Marker(r.point);
        //             map.addOverlay(mk);
        //             map.panTo(r.point);
        //             longitude=r.point.lng;
        //             latitude=r.point.lat;
        //             $.get('/meetTWO/public/index/map/point_post',{lat:r.point.lat,lng:r.point.lng},function(data){
        //                 console.log(data)
        //             })
        //             map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 15);//百度定位 
        //           // drive();
        //         }
        //         else {
        //             alert('failed'+this.getStatus());
        //         }        
        //     });
        // }
        
        //驾车路线
        // function drive()
        // {
        //     var p1 = new BMap.Point(longitude, latitude);
        //     var p2 = new BMap.Point({$lon}, {$lat});
        //     var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
        //     driving.search(p1, p2);
        // }
        //定位
        function location_1()
        {
            map.clearOverlays();    //清除地图上所有覆盖物
            var geolocation = new BMap.Geolocation();
            // 开启SDK辅助定位
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    longitude = r.point.lng;
                    latitude = r.point.lat;
                    map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 15);
                }
                else {
                    alert('failed' + this.getStatus());
                }
            });
        }
        // var heatmapOverlay=null;
      //热力图
      // var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":10, "visible":true, "opacity":70});
      // var heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
        function hot_map()
        {
             map.centerAndZoom(new BMap.Point(114.87, 40.82), 6);
            // onsole.log({$point});
            var points = {$point};//lng+lat+count
            if (!isSupportCanvas()) {
                alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
            }
            //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md  
            //参数说明如下:  
            /* visible 热力图是否显示,默认为true  
             * opacity 热力的透明度,1-100  
             * radius 势力图的每个点的半径大小  
             * gradient  {JSON} 热力图的渐变区间 . gradient如下所示  
             *  {  
                    .2:'rgb(0, 255, 255)',  
                    .5:'rgb(0, 110, 255)',  
                    .8:'rgb(100, 0, 255)'  
                }  
                其中 key 表示插值的位置, 0~1.  
                    value 为颜色值.  
             */
            
            // console.log(heatmapOverlay);
            heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
            map.addOverlay(heatmapOverlay);

            heatmapOverlay.setDataSet({ data: points, max: 100 ,heatmapOverlay:heatmapOverlay});
                        console.log(tag);
            // if (tag!=true) {
            //     console.log(heatmapOverlay.hide());
            // }

       }
         // closeHeatmap();

        //判断浏览区是否支持canvas  
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }

        function setGradient() 
        {
            // heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
            /*格式如下所示:  
            {  
                0:'rgb(102, 255, 0)',  
                .5:'rgb(255, 170, 0)',  
                1:'rgb(255, 0, 0)'  
            }*/
            var gradient = {};
            var colors = document.querySelectorAll("input[type='color']");
            colors = [].slice.call(colors, 0);
            colors.forEach(function (ele) {
                gradient[ele.getAttribute("data-key")] = ele.value;
            });
            heatmapOverlay.setOptions({ "gradient": gradient });
        }

        function openHeatmap() {
             map.clearOverlays();
            hot_map();
            // console.log(heatmapOverlay.show());
        }
        function closeHeatmap() {
            map.clearOverlays();
            // console.log(heatmapOverlay.hide());
            // heatmapOverlay.show();
        }
        
        function hot_img(){
            if (tag == true)
            {
                openHeatmap();
            } 
            else 
            {
                closeHeatmap();
            }
            tag = !tag;
            // console.log(tag);
        }

        var type="bus"; 
        $("#bus-search,#driver-search,#walk-search").click(function()
         {  
            map.clearOverlays();
             // tag=true;
            var id = $(this).attr("id");  
            $(".button").css("background-color","#fff");  
            $("#"+id).css("background-color","#95B7EE");  
            console.log($("#"+id).css("background-color","#95B7EE"));
            type = "bus";  
            if(id == "bus-search"){  
                type = "bus";  
            }else if(id == "driver-search"){  
                type = "driver";  
            }else if(id == "walk-search"){  
                type = "walk";  
            }  
            searchRoute();  
        });  
        
        //搜索路线  
        function searchRoute()
        {  
            if($("#end").val().length!=0){  
                var end = $("#end").val();  
                // $("#end").val("");  
            }else{  
                var pe = window.end_point.split(",");  
                var end = new BMap.Point(pe[0],pe[1]);  
            }  
            var ps = window.start_point.split(",");  
            var start = new BMap.Point(ps[0], ps[1]);  
            var starIcon = new BMap.Icon("$meet/static/maps/images/start.png", new BMap.Size(22, 32));  
            var endIcon = new BMap.Icon("$meet/static/maps/images/end.png", new BMap.Size(22,32)); 
           
            if(type == "bus"){  
                var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});  
                transit.search(start, end);  
                transit.setMarkersSetCallback(function(result){  
                    result[0].marker.setIcon(starIcon);  
                    result[1].marker.setIcon(endIcon);  
                });  
            }else if(type == "driver"){  
                var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});  
                driving.search(start, end);  
                driving.setMarkersSetCallback(function(result){  
                    result[0].marker.setIcon(starIcon);  
                    result[1].marker.setIcon(endIcon);  
                });  
            }else if(type == "walk"){  
                var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});  
                walking.search(start, end);  
                walking.setMarkersSetCallback(function(result){  
                    result[0].marker.setIcon(starIcon);  
                    result[1].marker.setIcon(endIcon);  
                });  
                //walking.search("天坛公园","故宫");  
            }  
        }  

</script>